/**
 * 📊 图表可视化功能
 * 支持柱形图、饼图、折线图三种展示方式
 */

// 检查 Chart.js 是否加载成功
if (typeof Chart === 'undefined') {
  console.error('⚠️ Chart.js 未能加载，图表功能将不可用');
  console.log('💡 请检查网络连接或尝试刷新页面');
}

// 全局变量
let mainChart = null;
let currentChartType = 'bar'; // 默认柱形图
let chartData = null;

// 分类中文映射
const categoryLabels = {
  // 收入分类
  salary: '工资',
  bonus: '奖金',
  investment: '投资',
  gift: '礼金',
  // 支出分类
  food: '餐饮',
  transport: '交通',
  shopping: '购物',
  entertainment: '娱乐',
  healthcare: '医疗',
  education: '教育',
  housing: '住房',
  utilities: '水电',
  other: '其他'
};

// 颜色方案
const colorScheme = {
  income: 'rgba(52, 168, 83, 0.8)',    // 绿色
  expense: 'rgba(234, 67, 53, 0.8)',   // 红色
  balance: 'rgba(66, 133, 244, 0.8)',  // 蓝色
  // 饼图颜色
  pie: [
    'rgba(66, 133, 244, 0.8)',   // 蓝色
    'rgba(52, 168, 83, 0.8)',    // 绿色
    'rgba(251, 188, 4, 0.8)',    // 黄色
    'rgba(234, 67, 53, 0.8)',    // 红色
    'rgba(156, 39, 176, 0.8)',   // 紫色
    'rgba(0, 188, 212, 0.8)',    // 青色
    'rgba(255, 87, 34, 0.8)',    // 橙色
    'rgba(121, 85, 72, 0.8)',    // 棕色
    'rgba(158, 158, 158, 0.8)',  // 灰色
  ]
};

// 初始化图表（在页面加载完成后调用）
async function initChart() {
  if (!currentBookId) {
    console.log('等待账本选择...');
    return;
  }
  
  try {
    await loadChartData();
  } catch (error) {
    console.error('初始化图表失败:', error);
  }
}

// 加载图表数据
async function loadChartData() {
  if (!currentBookId) {
    console.log('请先选择账本');
    return;
  }
  
  try {
    const months = document.getElementById('chartMonths').value;
    
    // 根据图表类型加载不同数据
    if (currentChartType === 'pie') {
      await loadPieChartData();
    } else {
      await loadMonthlyChartData(months);
    }
  } catch (error) {
    console.error('加载图表数据失败:', error);
    showToast('加载图表失败：' + error.message, 'error');
  }
}

// 加载月度数据（柱形图和折线图）
async function loadMonthlyChartData(months) {
  const result = await api.stats.getMonthly({
    book_id: currentBookId,
    months: months
  });
  
  chartData = result.data;
  
  if (chartData.length === 0) {
    showEmptyChart('暂无数据，请先添加记录');
    return;
  }
  
  renderChart(currentChartType);
}

// 加载分类数据（饼图）
async function loadPieChartData() {
  const result = await api.stats.getCategoryChart({
    book_id: currentBookId,
    type: 'expense'
  });
  
  chartData = result.data;
  
  if (chartData.length === 0) {
    showEmptyChart('暂无支出数据');
    return;
  }
  
  renderChart('pie');
}

// 渲染图表
function renderChart(type) {
  // 检查 Chart.js 是否加载
  if (typeof Chart === 'undefined') {
    showEmptyChart('⚠️ 图表库加载失败，请刷新页面重试');
    showToast('图表功能暂时不可用，请刷新页面', 'warning');
    return;
  }
  
  const canvas = document.getElementById('mainChart');
  const ctx = canvas.getContext('2d');
  
  // 销毁旧图表
  if (mainChart) {
    mainChart.destroy();
  }
  
  let config;
  
  switch (type) {
    case 'bar':
      config = getBarChartConfig();
      break;
    case 'pie':
      config = getPieChartConfig();
      break;
    case 'line':
      config = getLineChartConfig();
      break;
  }
  
  mainChart = new Chart(ctx, config);
  updateChartLegend(type);
}

// 柱形图配置
function getBarChartConfig() {
  const labels = chartData.map(item => item.month);
  const incomeData = chartData.map(item => item.income);
  const expenseData = chartData.map(item => item.expense);
  
  return {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [
        {
          label: '收入',
          data: incomeData,
          backgroundColor: colorScheme.income,
          borderColor: colorScheme.income.replace('0.8', '1'),
          borderWidth: 1
        },
        {
          label: '支出',
          data: expenseData,
          backgroundColor: colorScheme.expense,
          borderColor: colorScheme.expense.replace('0.8', '1'),
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          position: 'top',
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return context.dataset.label + ': ¥' + context.parsed.y.toFixed(2);
            }
          }
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            callback: function(value) {
              return '¥' + value;
            }
          }
        }
      }
    }
  };
}

// 饼图配置
function getPieChartConfig() {
  console.log('📊 饼图原始数据:', chartData);
  const labels = chartData.map(item => categoryLabels[item.category] || item.category);
  const data = chartData.map(item => item.amount || item.total || 0);  // 兼容 amount 和 total 字段
  const total = data.reduce((sum, val) => sum + val, 0);
  
  console.log('📊 饼图标签:', labels);
  console.log('📊 饼图数值:', data);
  console.log('📊 总计:', total);
  
  return {
    type: 'pie',
    data: {
      labels: labels,
      datasets: [{
        data: data,
        backgroundColor: colorScheme.pie,
        borderColor: '#fff',
        borderWidth: 2
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          position: 'right',
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              const value = context.parsed;
              const percentage = ((value / total) * 100).toFixed(1);
              return context.label + ': ¥' + value.toFixed(2) + ' (' + percentage + '%)';
            }
          }
        }
      }
    }
  };
}

// 折线图配置
function getLineChartConfig() {
  const labels = chartData.map(item => item.month);
  const incomeData = chartData.map(item => item.income);
  const expenseData = chartData.map(item => item.expense);
  const balanceData = chartData.map(item => item.balance);
  
  return {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: '收入',
          data: incomeData,
          borderColor: colorScheme.income,
          backgroundColor: colorScheme.income.replace('0.8', '0.2'),
          tension: 0.3,
          fill: false
        },
        {
          label: '支出',
          data: expenseData,
          borderColor: colorScheme.expense,
          backgroundColor: colorScheme.expense.replace('0.8', '0.2'),
          tension: 0.3,
          fill: false
        },
        {
          label: '余额',
          data: balanceData,
          borderColor: colorScheme.balance,
          backgroundColor: colorScheme.balance.replace('0.8', '0.2'),
          tension: 0.3,
          fill: false
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          position: 'top',
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return context.dataset.label + ': ¥' + context.parsed.y.toFixed(2);
            }
          }
        }
      },
      scales: {
        y: {
          ticks: {
            callback: function(value) {
              return '¥' + value;
            }
          }
        }
      }
    }
  };
}

// 切换图表类型
function switchChartType(type) {
  currentChartType = type;
  
  // 更新按钮样式
  document.querySelectorAll('.chart-type-btn').forEach(btn => {
    if (btn.dataset.type === type) {
      btn.classList.remove('btn-secondary');
      btn.classList.add('btn-primary', 'active');
    } else {
      btn.classList.remove('btn-primary', 'active');
      btn.classList.add('btn-secondary');
    }
  });
  
  // 重新加载数据
  loadChartData();
}

// 更新图表说明
function updateChartLegend(type) {
  const legendDiv = document.getElementById('chartLegend');
  
  if (!legendDiv) {
    console.warn('图表说明元素不存在');
    return;
  }
  
  switch (type) {
    case 'bar':
      legendDiv.innerHTML = '💡 柱形图：对比各月收入和支出情况';
      break;
    case 'pie':
      legendDiv.innerHTML = '💡 饼图：显示支出分类占比';
      break;
    case 'line':
      legendDiv.innerHTML = '💡 折线图：展示收支趋势和余额变化';
      break;
  }
}

// 显示空图表提示
function showEmptyChart(message) {
  if (mainChart) {
    mainChart.destroy();
    mainChart = null;
  }
  
  const canvas = document.getElementById('mainChart');
  if (!canvas) {
    console.warn('图表画布元素不存在');
    return;
  }
  
  const ctx = canvas.getContext('2d');
  
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 显示提示信息
  ctx.font = '16px Arial';
  ctx.fillStyle = '#999';
  ctx.textAlign = 'center';
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
  
  const legendDiv = document.getElementById('chartLegend');
  if (legendDiv) {
    legendDiv.innerHTML = '';
  }
}

// 在选择账本时初始化图表
window.addEventListener('bookSelected', () => {
  initChart();
});

console.log('📊 图表功能已加载'); 